<template>
	<view>
		<view class="flex align-center justify-between padding-y-16 padding-x-30 nav_fixed_top">
			<view @click="goBack()">
				<image src="../../static/img/back.png" style="width: 30rpx;height: 30rpx;margin: 0 auto;"></image>
			</view>
			<view class="radius60 flex1 margin-x-30 padding-x-30 flex align-center"
				style="background: rgba(102, 102, 102, 0.08);">
				<image src="../../static/img/srh_6.png" style="width: 40rpx;height: 40rpx;"></image>
				<input v-model="q.keyword" @confirm="search()" type="text" class="fs-26 color-333 margin-left-20 ipt flex1" placeholder="请输入">
			</view>
			<view>
				<image  @click="sjump('/pages/msg/index')"  src="../../static/img/msg_6.png" style="width: 46rpx;height: 46rpx;"></image>
			</view>
		</view>
		<!-- 分类 -->
		<view class="padding-20 bg-f7f7f7" v-if="cate.length > 0">
			<view class="flex align-center  flex-wrap bg-fff padding-top-24 padding-bottom-16">
				<view v-for="(item,index) in cate" :key='index' @click="jump('/pages/canyin/two?id='+item.id+'&title='+item.name)" class="w20 text-center margin-bottom-24">
					<image :src="item.pic" class="index_icon"></image>
					<view class="fs-24 color-333">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 分类end -->
		<view class="relative">
			<view class="padding-y-24 flex align-center justify-between">
				<view @click="changeType(1)" class="flex align-center flex1 justify-center">
					<text class="fs-28  margin-right-10" :class="sortType == 1 ?'color-zhuse':'color-999'" v-if="sortIndex == -1">全部</text>
					<text class="fs-28  margin-right-10" :class="sortType == 1 ?'color-zhuse':'color-999'" v-else>{{sortArr[sortIndex].name}}</text>
					<image :src="sortType == 1  ? '../../static/img/down_on.png':'../../static/img/down.png'" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			<!-- 	<view class="flex align-center flex1 justify-center">
					<text class="fs-28  margin-right-10" :class="sortType == 2 ?'color-zhuse':'color-999'">附近</text>
					<image src="../../static/img/down.png" style="width: 30rpx;height: 30rpx;"></image>
				</view> -->
				<!-- <view @click="changeType(3)" class="flex align-center flex1 justify-center">
					<text class="fs-28  margin-right-10" :class="sortType == 3 ?'color-zhuse':'color-999'">筛选</text>
					<image :src="sortType == 3 ? '../../static/img/filter_on.png':'../../static/img/filter.png'" style="width: 30rpx;height: 30rpx;"></image>
				</view> -->
			</view>
			<!-- 推荐、销量切换 -->
			<view class="absolute sortCon w100" v-if="flag"  @tap.stop="flag=false">
				<view v-for="(item,index) in sortArr" :key='index'
					class="fs-26  padding-y-24 solid-bottom bg-fff  padding-x-24"
					:class="sortIndex == index ? 'color-zhuse' : 'color-333'" @tap.stop="changeSort(index)">{{item.name}}</view>
			</view>
		</view>

		<view class="clearfix  margin-top-10 padding-x-10">
			<!-- 商家列表 -->
			<view v-for="(item,index) in list" :key='index' @click="jump('/pages/canyin/detail?id='+item.id)" class="w50 fl padding-x-10 margin-bottom-30  bg-fff">
				<view class="goods_item">
					<image class="goods_img" :src="item.cover" mode="aspectFit"></image>
					<view class="margin-top-10 padding-x-20">
						<view class="goods_name text-cut-2">{{item.name}}</view>
						<view class="fs-24 flex align-center justify-between padding-y-20">
							<view class="color-999"><text class="color-zhuse margin-right-10">{{item.score}}分</text> | 月售{{item.sale}}
							</view>
							<view class="color-fuse">{{item.distance || 0}}m</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<!-- 商家列表 end -->
		</view>
		<view class="nomore" :class="loadStatus" v-if="list.length"></view>
		<empty v-if="list.length < 1" style="top: 60%;"></empty>

		<!-- 筛选 -->
		<view v-if="filter"
			class="fixed filterCon bg-fff padding-x-20 padding-y-30 flex align-center justify-between flex-direction">
			<view class="flex align-center w100">
				<image @click="filter = false" src="../../static/img/back.png" style="width: 30rpx;height: 30rpx;">
				</image>
				<view class="fs-30 color-333 flex1 text-center">筛选</view>
			</view>
			<view class="flex1 w100 margin-y-40">
				<view>
					<view class="fs-28 color-333 ">档次</view>
					<view class="margin-top-24 flex align-center  flex-wrap">
						<view v-for="(item,index) in screen.level" :key='index' @click="changeScreen(item.key,'level')" :class="q.level == item.key ? 'on':''" class="nav_item fs-26 color-333 margin-right-24  margin-bottom-24">{{item.value}}</view>
					</view>
				</view>
				<view class="margin-top-40">
					<view class="fs-28 color-333 ">营业时间</view>
					<view class="margin-top-24 flex align-center  flex-wrap">
						<view v-for="(item,index) in screen.hours" :key='index' @click="changeScreen(item.key,'hours')" :class="q.hours == item.key ? 'on':''" class="nav_item fs-26 color-333 margin-right-24  margin-bottom-24">{{item.value}}</view>
					</view>
				</view>
				<view class="margin-top-40">
					<view class="fs-28 color-333 ">人数</view>
					<view class="margin-top-24 flex align-center  flex-wrap">
						<view v-for="(item,index) in screen.diners" :key='index'  @click="changeScreen(item.key,'diners')"  :class="q.diners == item.key ? 'on':''" class="nav_item fs-26 color-333 margin-right-24  margin-bottom-24">{{item.value}}</view>
					</view>
				</view>
			</view>
			<view class="flex align-center justify-center">
				<view @click="cancelCate()" class="fs-30 color-zhuse bg-fff text-center btn1">重置</view>
				<view @click="sureCate()" class="fs-30 color-fff bg-zhuse text-center btn2">筛选</view>
			</view>
		</view>
		<!-- 筛选end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				sortArr: [{
					type: 'sort',
					name: '推荐'
				}, {
					type: 'sale',
					name: '销量'
				}, {
					type: 'score',
					name: '评分'
				}, {
					type: 'distance',
					name: '距离'
				}],
				sortIndex: -1,
				filter: false,
				pid: '',
				cate: [],
				q:{
					keyword:"",
					// longitude:'',
					// latitude:'',
					longitude:uni.getStorageSync('longitude'),
					latitude:uni.getStorageSync('latitude'),
					sort:"sort",
					classify_pid:"",
					level:"",
					hours:"",
					diners:"",
					page:1,
				},
				hasMore: true,
				loadStatus: '',
				list: [],
				screen:[],
				sortType:1
			}
		},
		onLoad(opt) {
			if(opt.id){
				this.pid = opt.id;
				this.q.classify_pid = opt.id;
				this.init();
			}
			this.getScreen()
			
			if(opt.keyword){
				this.q.keyword = opt.keyword;
			}
		
			this.getList();
		},
		onReachBottom() {
			if(this.hasMore){
				this.q.page += 1;
				this.getList();
			}
		},
		methods: {
			init() {
				this.$api.classify({
					pid: this.pid
				}).then(res => {
					if (res.code == 1) {
						this.cate = res.data;
					}
				})
				
			},
			
			getScreen(){
				this.$api.screen().then(res => {
					if (res.code == 1) {
						this.screen = res.data;
					}
				})
			},
			
			getList(){
				this.isLoading = true;
				console.log(this.q)
				this.$api.nearby_shop(this.q).then(res=>{
					if(res.code == 1){
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			
			changeType(type){
				this.sortType = type;
				if(type == 1){
					this.flag = true
				}
				if(type == 3){
					this.filter = true
				}
			},
			
			changeScreen(key,type){
				if(type == 'level'){
					this.q.level = key
				}
				if(type == 'hours'){
					this.q.hours = key
				}
				if(type == 'diners'){
					this.q.diners = key
				}
				this.q.page = 1;
			},
			cancelCate(){
				this.filter = false;
				this.q.level = '';
				this.q.hours = '';
				this.q.diners = '';
				this.q.page = 1;
				this.list = [];
				this.getList();
			},
			sureCate(){
				this.filter = false;
				this.q.page = 1;
				this.list = [];
				this.getList();
			},
			
			search(){
				this.q.page = 1;
				this.list = [];
				this.getList();
			},
			
			changeSort(index) {
				this.q.sort = this.sortArr[index].type;
				this.sortIndex = index;
				this.flag = false;
				// this.q.level = '';
				// this.q.hours = '';
				// this.q.diners = '';
				this.q.page = 1;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav_fixed_top{
		/* #ifdef APP-PLUS */
		padding-top: 88rpx;
		/* #endif */
	}
	.ipt {
		height: 70rpx;
	}

	.index_icon {
		width: 76rpx;
		height: 76rpx;
	}

	.sortCon {
		top: 70rpx;
		background: rgba(0, 0, 0, 0.4);
		height: 100vh;
		z-index: 9;
	}

	.filterCon {
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		/* #ifdef APP-PLUS */
		padding-top: 88rpx;
		/* #endif */
	}

	.nav_item {
		background: rgba(153, 153, 153, 0.1);
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		border-radius: 60rpx;
	}

	.nav_item.on {
		background: rgba(255, 147, 46, 0.08);
		color: #FF932E;
		border: 1rpx solid #FF932E;
	}

	.btn1 {
		width: 300rpx;
		height: 82rpx;
		line-height: 82rpx;
		border: 1rpx solid #FF932E;
	}

	.btn2 {
		width: 300rpx;
		height: 82rpx;
		line-height: 82rpx;
		border: 1rpx solid #FF932E;
	}
</style>
